<template>
  <div class="list">
    <MyItem :todoList="todoList" @delID="delId" />
  </div>
</template>

<script>
import MyItem from '@/components/MyItem.vue'
//import bus from '../../util/bus'
export default {
  name: 'list',
  data() {
    return {
      todoList: []
    }
  },
  created() {
    // 如果todoList在localStorage存在，就从localStorage中取值，如果不存在就将它设置而为一个空数组。
    if(localStorage.getItem('todoList')){
      this.todoList = JSON.parse(window.localStorage.getItem('todoList'))
    }else{
      this.todoList = []
    }

    // 接收到了头部兄弟组件发送来的数据并且赋值给todoList
    this.$bus.$on('add', (todoArr) => {
      this.todoList.unshift(todoArr)
    })
    // 监听foot组件发送过来是否全选的数据，并且改变todoList的每一项isCheck
    this.$bus.$on('emitChecked', (checked) => {
      this.todoList.forEach(todo => {
        todo.isCheck = checked
      })
    })
    // 监听foot组件发送过来的事件，清空一选中的todoList
    this.$bus.$on('emptyFinsish', () => {
      //   console.log(11)
      this.todoList = this.todoList.filter((todo) => {
        return todo.isCheck !== true
      })
    })

  },
  mounted() {
    //this.$bus.$emit('footList', this.todoList)
  },
  components: {
    MyItem
  },
  methods: {
    // getId(id){
    //     console.log('接受到了子组件传的值',id)
    //     this.todoList.forEach(todo=>{
    //         if(todo.id==id) todo.isCheck = !todo.isCheck
    //     })
    //     //console.log('过滤的todo',newTodo)
    // },


    // 监听到了子组件发送过来的事件，通过传过来的id来删除对应todo
    delId(id) {
      this.todoList = this.todoList.filter(todo => {
        return todo.id !== id
      })
    }
  },
  watch: {
    // 每次改变todoList里面的值都要利用监听属性来给foot组件重新计算，并且是深度监听。
    // 每次改变todoList都会往localStorage存入新的数据。
    todoList: {
      handler() {
        this.$bus.$emit('footList', this.todoList)
        window.localStorage.setItem("todoList", JSON.stringify(this.todoList))
      },
      deep: true

    }
  }

}
</script>

<style scoped>
</style>